import Vue from 'vue'
//导入bootstrap样式
import 'bootstrap/dist/css/bootstrap.css'
// 导入MUI样式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'
import app from './app.vue'
// 导入 mint-ui 的样式
import 'mint-ui/lib/style.css'

// 手动注册
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import router from './router.js'

// 按需导入 Mint-UI 中的组件 (SwipeItem:轮播图)
// import {Header, Swipe, SwipeItem,Button,Lazyload} from 'mint-ui';
// Vue.component(Header.name, Header)
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
// Vue.use(Lazyload);
//全部导入
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'
//导入 vue-resource 
import VueResource from 'vue-resource'
// 安装 vue-resource
Vue.use(VueResource)
// 设置请求的根路径
// 必须在 vue-resource 之后
Vue.http.options.root = 'http://www.liulongbin.top:3005';
// 全局设置提交时 表单中的数据格式
Vue.http.options.emulateJSON = true;

// 导入 v-view 及它的样式表
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
Vue.use(Viewer)

// 利用 moment cnpm i moment -S
// moment 是一个日期处理类库
import moment from 'moment'
Vue.filter('dateFormat', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
    return moment(dataStr).format(pattern)
})

// 虽然上面全部导入 mint-ui 了 但是Toast 不是一个全局变量
// 解决方法：1.再引入 Toast 
// 2.若是在一个实例上使用 如一个vm 里 this.$toast('**')
import {Toast} from 'mint-ui'
// 注册vuex
import Vuex from 'vuex'
Vue.use(Vuex)

//获取 localStorage 中的car
// JSON.parse(a):将数据(a)转换为js对象
var car = JSON.parse(localStorage.getItem('car') || '[]')

var store = new Vuex.Store({
    state: { //this.$store.state.***
        car: car  //存放购物车中的数据 {id:商品id, count: 要购买的数量,
        //price: 商品单价, selected: 商品是否参与此次的结算, quantity: 商品库存}
    },
    mutations: { //this.$store.commit('方法名','按需传递唯一的参数' )
        addToCar(state, goodsinfo) { //点击加入购物车，把商品信息保存到 store 中的car 上
            //分析
            //1.购物车中已经有对应商品，只需要更新数量
            // 2.没有 则直接把商品数据 push 到 car 中

            var flag = false;  //默认购物车中没有该商品

            flag = state.car.some(item => {
                //若购物车中有该商品，在原基础上再加 并返回 true
                if (item.id == goodsinfo.id) {
                        item.count += parseInt(goodsinfo.count);
                    // else{
                    //     Toast({
                    //         message:'购买数量不能超过库存',
                    //         duration: 1000,
                    //     })
                    // }
                    //终止 some 循环
                    return true;
                }
            })
            // 购物车中没有该商品 
            if (!flag) {
                state.car.push(goodsinfo);
            }

            // 将购物车数据保存到本地存储
            localStorage.setItem('car', JSON.stringify(state.car))

        },
        updateGoodsInfo(state, goodsinfo) {
            //这里需要获取商品的id
            state.car.some(item => {
                if (item.id == goodsinfo.id) {
                    item.count = parseInt(goodsinfo.count);
                    return true
                }
            })
            localStorage.setItem('car', JSON.stringify(state.car))
        },
        removeFromCar(state, id) { //根据 id 删除商品
            state.car.some((item, i) => {
                if (item.id == id) {
                    state.car.splice(i, 1);
                    return true;
                }
            })
            localStorage.setItem('car', JSON.stringify(state.car))
        },
        updateGoodsSelected(state,info){ //修改商品selected
            // 这里 info 是一个{id：**，selected：**} 对象
            state.car.some(item=>{
                if(item.id==info.id){
                    item.selected=info.selected;
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))
        }
    },
    getters: {//this.$store.getters.**
        // 相当于 computed 也相当于 filter
        getAllCount(state) {
            var c = 0;
            state.car.forEach(item => {
                c += item.count
            })
            return c;
        },
        getGoodsCount(state) {//获取商品count
            var goodsCount = {};
            state.car.forEach(item => {
                // id作为键，count为值
                goodsCount[item.id] = item.count;
            })
            return goodsCount;
        },
        getGoodsQuantity(state){ //获取商品 quantity (库存)
            var goodsQuantity={};
            state.car.forEach(item=>{
                // id作为键， quantity 为值
                goodsQuantity[item.id]=item.quantity;
            })
            return goodsQuantity;
        },
        getGoodsSelected(state){ //获取商品 selected 
            var goodsSelected={};
            state.car.forEach(item=>{
                // {键id：值selected}
                goodsSelected[item.id]=item.selected;
            })
            return goodsSelected;
        },
        getGoodsCountAndAmount(state){//获取商品总数和总价
            var goodsCountAndMount={
                count:0,
                amount:0,
            }
            state.car.forEach(item=>{
                if(item.selected){
                    goodsCountAndMount.count+=item.count;
                    goodsCountAndMount.amount+=item.count*item.price;
                }
            })
            return goodsCountAndMount;
        }
    },
})


var vm = new Vue({
    el: '#app',
    // render:function(c){
    //     return c(app)
    // },
    render: c => c(app),  // 上面的简写 
    router: router,
    store,  //挂载 store
})

